<template>
  <div id="LoginPage" @keyup.enter="loginStatic">
    <div id="title">图书馆后台管理系统</div>
    <div id="LoginShell" >
      <div id="Login">
        <h1>登录</h1>
        <div class="input">用户名
          <el-input v-model="username" placeholder="用户名" autofocus="autofocus"></el-input>
        </div>
        <div class="input">密码
          <el-input v-model="password" type="password" placeholder="密码"></el-input>
        </div>
        <div class="button">
          <el-button @click="loginStatic">登录</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "Login",
  data() {
    return {
      username: '',
      password: '',
      usernameVerify: false
    }
  },
  methods: {
    loginStatic(){ //login的静态方法
      if (this.username==="admin"){
        if(this.password==="123456"){
          this.$router.push({name: 'DefaultManual'});
          this.$store.commit('setUserName',this.username);
        }else{
          this.$message.error('密码错误！');
        }
      }else{
        this.$message.error('用户名不存在！');
      }
    },
    login() {
      let that = this;
// ------------------------验证用户名-----------------------
      axios({    //修改数据
        method: 'post',
        url: 'http://localhost:3000/login/username',
        params: {
          username: that.username,
        },
        data: {},
        headers: {'content-Type': 'application/x-www-form-urlencoded'},
      }).then(function (response) {
        if (response.data === "error") {
          that.$message.error('用户名不存在！');
        } else if (response.data === "success") {

// ------------------------验证密码------------------------
          axios({    //修改数据
            method: 'post',
            url: 'http://localhost:3000/login/password',
            params: {
              username: that.username,
              password: that.password
            },
            data: {},
            headers: {'content-Type': 'application/x-www-form-urlencoded'},
          }).then(function (response) {
            if (response.data === "error") {
              that.$message.error('密码错误！');
            } else if (response.data === "success") {
              that.$router.push({name: 'DefaultManual'});
              that.$store.commit('setUserName',that.username);
            }
          }).catch(function (error) {
            console.log(error);
          });
// ----------------------------------------------------
        }
      }).catch(function (error) {
        console.log(error);
      });
// ----------------------------------------------------
    },
  },

}
</script>

<style scoped>
#LoginPage {
  width: 100%;
  height: 100%;
}

#title {
  position: absolute;
  margin-top: 18%;
  padding-left: 10%;
  padding-right: 10px;
  border-radius: 0 10px 10px 0;
  color: white;
  font-size: 55px;
  font-weight: 500;
  background: #409eff;
  box-shadow: -3px 4px 2px 0px #4c4c4c;
}

#LoginShell {
  box-shadow: 1px 1px 10px 0px #acacac;
  border-radius: 10px;
  position: absolute;
  margin-top: 10%;
  margin-left: 60%;
  width: 450px;
  height: 370px;
  background-color: rgba(30, 144, 255, 0.75);
}

#Login {
  padding-top: 20%;
}

#Login h1 {
  text-align: center;
  color: white;
  margin: 0px 0px 15px 0px;
}

.input {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  color: white;
  margin-bottom: 5%;
}

.input .el-input {
  margin-left: 10px;
  margin-right: 20px;
  width: 80%;
}

.button {
  text-align: center;
}
</style>